<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElLoading, ElMessage} from "element-plus";

const articlePageLoading = ref(true);
const articlePageIndex = ref(1);
const headers = {
    Authorization: localStorage.getItem("auth")
}
const articleSeries = ref("1");
//搜索的藏品名称
const articleTitle = ref("");
const article = [
    {
        value: '1',
        label: '公告',
    },
    {
        value: '2',
        label: '新闻',
    },
]
//搜索的藏品编号
const articleOptions = [
    {
        value: '1',
        label: '公告管理',
    },
    {
        value: '2',
        label: '新闻管理',
    },
]
//定义文章表格的引用
const article1TableRef = ref();
const articlePage=ref({
    records:[]
});
//选择的当前文章
const currentArticle1 = ref({});

const handleRowClick = row => {
  if(row!=undefined){
    article1TableRef.value.data.forEach(r => {
      article1TableRef.value.toggleRowSelection(r, r.id == row.id);
    })
    currentArticle1.value = row;
    console.log("点击一行了",row);
  }
  }

const getArticlePage = () => {
    articlePageLoading.value = true;
    axios.post("/api/article", {
        pageIndex:articlePageIndex.value,
        pageSize: 10,
        title: articleTitle.value,
        typeId: parseInt(articleSeries.value),
    }, {headers}).then(response => {
        console.log("获取成功");
        articlePage.value = response.data.value;//将从接口获取到的数据，赋值给articlePage对象
        console.log(articlePage.value)
        articlePageLoading.value = false;
    }).catch(error => {
        console.log("获取失败", error.response);
        articlePageLoading.value = false;
    })
}
getArticlePage()
//选择数据key集合
const multipleSelection = ref([]);
const handleSelectionChange = val => {
    multipleSelection.value = val;
    if (multipleSelection.value.length == 1) {
        currentArticle1.value = multipleSelection.value[0];
    } else {
        currentArticle1.value = {};
    }
}
const dialogEditArticleVisible = ref(false);
const dialogEditArticleShowVisible = ref(false);
const addArticle = () => {
    console.log("点击新增按钮了..");
    currentArticle1.value = {
        id:0
    };
    dialogEditArticleVisible.value = true;
}
const updateArticle = () => {
    dialogEditArticleVisible.value = true;
}
const showArticle = () => {
    dialogEditArticleShowVisible.value = true;
}
const saveArticle = () => {
    console.log("点击了保存", currentArticle1.value);
    let loading = ElLoading.service({
        lock: true,
        text: '处理中...',
    })
    axios.post("/api/article/save", currentArticle1.value, {headers}).then(response => {
        console.log("保存成功");
        loading.close();
        dialogEditArticleVisible.value = false;
        getArticlePage();
    }).catch(error => {
        console.log("保存失败", error.response);
        ElMessage({
            message: error.response.data.message,
            type: 'warning',
        })
    })
}


//删除按钮加载中
const btnRemoveLoading = ref(false);

//删除藏品
const removeGoods = () => {
  // console.log("你选中的行有：", multipleSelection.value);
  multipleSelection.value.forEach(article => {
    btnRemoveLoading.value = true;
    axios.get("/api/article/remove?id="+article.id, {headers}).then(response => {
      console.log("删除成功");
      getArticlePage();
      btnRemoveLoading.value = false;
    }).catch(error => {
      console.log("删除失败", error.response);
      btnRemoveLoading.value = false;
      ElMessage({
        message: error.response.data.message,
        type: 'warning',
      })
    })
  })
}

</script>


<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item>活动中心</el-breadcrumb-item>
    <el-breadcrumb-item>文章管理</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="view">
    <div class="vHead">
      <div class="vHLeft">
          分类:
          <el-select v-model="articleSeries" style="width:140px">
              <el-option
                      v-for="item in articleOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
              />
          </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-input v-model="articleTitle" placeholder="输入名称title" style="width:200px" />&nbsp;&nbsp;
          <el-button type="primary" @click="getArticlePage">搜索</el-button>&nbsp;提示:(分类选择也要点击搜索)
      </div>
      <div >
          <el-button type="primary" @click="addArticle">新增</el-button>
          <el-button type="warning" @click="updateArticle" :disabled="multipleSelection.length != 1">修改</el-button>
        <el-popconfirm title="确认删除吗？"
                       confirm-button-text="是"
                       cancel-button-text="否"
                       @confirm="removeGoods">
          <template #reference>
            <el-button type="warning" :disabled="multipleSelection.length == 0" :loading="btnRemoveLoading">删除</el-button>
          </template>
        </el-popconfirm>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
    </div>
    <div>
        <el-table :data="articlePage.records"
                  v-loading="articlePageLoading"
                  row-key="id"
                  ref="article1TableRef"
                  @current-change="handleRowClick"
                  @selection-change="handleSelectionChange"
                  stripe
                  highlight-current-row
                  empty-text="暂无数据"
                  style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="title" label="名称" width="180" />
            <el-table-column prop="publishTime" label="推送时间"  />
            <el-table-column width="100">
                <el-button type="default" @click="showArticle">查看内容</el-button>
            </el-table-column>
        </el-table>
        <el-pagination
                :page-size="articlePage.pageSize"
                v-model:current-page="articlePageIndex"
                layout="prev, pager, next"
                :total="articlePage.total"
                @current-change="getArticlePage"
        />
<!--        <el-pagination background layout="prev, pager, next"-->
<!--                       :default-page-size="articlePage.pageSize"-->
<!--                       :total="articlePage.total"-->
<!--                       v-model:current-page="articlePageIndex"-->
<!--                       @current-change="getArticlePage" />-->
    </div>
  </div>
    <el-dialog
            v-model="dialogEditArticleVisible"
            :title="(currentArticle1.id == 0 ? '新增' : '修改')"
            width="1100" align-center>
        <table width="100%" height="400">
            <tr>
                <td>类型:</td>
                <td>
                    <el-select v-model="currentArticle1.typeId" style="width:160px" placeholder="请选择操作类型">
                        <el-option
                                v-for="item in article"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
            </tr>
            <tr>
                <td>标题:</td>
                <td>
                    <el-input v-model="currentArticle1.title" style="width:180px"/>
                </td>
            </tr>
            <tr>
                <td>发布日:</td>
                <td>
                    <el-date-picker
                            v-model="currentArticle1.publishTime"
                            style="width:180px"
                            type="datetime"
                            placeholder="选择一个发布日期"
                    />
                </td>
            </tr>
            <tr>
                <td>输入所要发布的内容:</td>
                <td >
                    <el-input v-model="currentArticle1.content" style="width:1000px" input-style="height: 200px"/>
                </td>
            </tr>
        </table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogEditArticleVisible = false">取消</el-button>
        <el-button type="primary" @click="saveArticle">保存</el-button>
      </span>
    </template>
  </el-dialog>
    <el-dialog
            v-model="dialogEditArticleShowVisible" width="800" align-center>
        <table>
            <tr>内容详情:</tr>
            <tr>
                <td>{{currentArticle1.content}}</td>
            </tr>
        </table>
        </el-dialog>
</template>

<style scoped>

</style>